import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import {Link,routerRedux} from 'dva/router';
import {Button,Row,Col,Layout, Breadcrumb,Icon,Form,Input,message,Tabs,Table} from 'antd';
// import reqwest from 'reqwest';
import {reqwest_get} from '../../utils/Reqwest.js'
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less'
import {numvail,selectvail} from '../../utils/Validator.js'
// import { Editor } from 'react-draft-wysiwyg'
// import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import {datevali_deta} from '../../utils/Validator.js'
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
class ClueDetails extends React.Component{
	constructor(props){
		super(props);
		this.state={
			loading:false,
			// list:JSON.parse(window.localStorage['clues']),
			contentState:undefined,
			data:[],
			_node:undefined,
			tab:'false',
			columns:[{
        title:'订单号',
        dataIndex:'orders',
        key:'orders'
      },{
        title:'客户名称',
        dataIndex:'name',
        key:'name',
        width:'20%'
      },{
      	title:'订单所有者',
      	dataIndex:'mobile',
      	key:'mobile'
      },{
        title:'手机号码',
        dataIndex:'phone',
        phone:'phone'
      },{
        title:'提成',
        dataIndex:'rate',
        key:'rate',
      },{
        title:'操作',
        key:'action',
        render:(text, record, index) => {
          return (
            <div className="editable-row-operations">
              {
                  <span>
                    <Link   to={{pathname:'/app/acct_list',query:{current:this.props.location.query.current,usr:record.key,typ:'list'}}}>详情</Link>
                  </span>
              }
            </div>
          )
        }
      }]
		}
	}
	handleSubmit(e){
    // console.log(e)
    e.preventDefault();
    let _this=this;
    this.props.form.validateFields((err, values) => {
        console.log(values.name);
// debugger
      if (!err) {
        console.log('Received values of form: ', values);
	      	_this.pacthServer(values)
      }else{
      	console.log(2)
      }
    });
	}

	componentWillMount(){
		this.onChange({tab:false,current:1})
		// yield put(routerRedux.push('/log'));
		// routerRedux.push({
		//   pathname: '/log',
		//   query: {
		//     page: 2,
		//   },
		// });
		// this.loadserver();
		// let contentState={"entityMap":{},blocks:[]};
		// console.log(JSON.parse(JSON.parse(window.localStorage['clues']).remark))
	}
	onChange(params={}){
		let _data = [];
		console.log(params)
		reqwest_get("/api/strategy_results",{
			access_token:window.localStorage['token'],
			state:params.tab,
			page:params.current
		},(response)=>{
			console.log(response.list)
			const pagination = { ...this.state.pagination };
      pagination.total = response.total;
			for(let i of response.list){
				console.log(i)
				_data.push({
					key:i.id,
					orders:i.serial_number,
					name:i.customer_name,
					mobile:i.saler_name,
					phone:i.saler_mobile,
					rate:i.saler_rate_amount
				})
			}
			this.setState({
				data:_data,
				pagination:pagination,
			})
		})
		
  }
	render(){
		// console.log(this.state.data)
		const formItemLayout = {
      labelCol: { span: 7},
      wrapperCol: { span: 17 },
      // style:{minWidth:200}
    };
    const {list} =this.state;
    // const _remark = JSON.parse(list.remark)
  	const {getFieldDecorator}=this.props.form;
		return(
			<Layout >
				<Layout.Content className={`${style.berad}`} >
					<Row>
						<Breadcrumb  className={`${style.blue_dia_none}`}>
							<Breadcrumb.Item ><span className={`${style.blue_dia}`}></span></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div} ${style.bread_div_first}`}><Link to={{pathname:'/app/clues',query:{current:this.props.location.query.current}}}>订单</Link></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div}`}>订单详情</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
				</Layout.Content>
				<Layout  style={{padding:'24px 25px 0px',background:'#fff'}}>
					<Tabs onTabClick={(e)=>{this.setState({tab:e}); this.onChange({tab:e}) }} defaultActiveKey="false" activeKey={this.state.tab} >
			      <TabPane tab="未支付订单" key="false">
			        <Table columns={this.state.columns}
			          dataSource={this.state.data} 
			          id="table_clue"
			          rowKey="table_clue"
			          className="table_clue"
			          pagination={this.state.pagination}
			          loading={this.state.loading}
			          onChange={this.state.onChange}
			        />
			      </TabPane>
			      <TabPane tab="已支付订单" key="true">
			        <Table columns={this.state.columns}
			          dataSource={this.state.data} 
			          loading={this.state.loading}
			          pagination={this.state.pagination}
			          onChange={this.state.onChange}
			        />
			      </TabPane>
			    </Tabs>
			</Layout>
			</Layout>
		)
	}
}
       		//<Row>
       	//		<Col span={8}>
					//		<FormItem  {...formItemLayout} label='历史备注'>
     			//			{this.state._node}
     		//			</FormItem>
     		//		</Col>
				//	</Row>
const ClueDetailsForm = Form.create()(ClueDetails);

export default connect()(ClueDetailsForm);